<script setup lang="ts">
import { computed } from 'vue'
import { NTag } from 'naive-ui'
import type { ProjectVo } from '~/entity/project/project-vo'
import ImageProjectCoverDefault from '~/assets/project/image-project-cover-default.png?url'
import projectRequest from '~/api/project'

const props = defineProps<{
  project: ProjectVo
}>()

const emits = defineEmits<{
  handleViewHistory: [item: ProjectVo]
  handleEdit: [id: string]
  handleView: [id: string]
  handleRefresh: []
}>()

// 状态信息
const isDisabled = computed<boolean>(() => props.project.isDisabled === 1)

const options = [
  {
    label: '生成历史',
    key: 'view-history',
  },
  {
    label: '查看',
    key: 'view',
  },
  {
    type: 'divider',
    key: 'd1',
  },
  {
    label: '编辑',
    key: 'edit',
  },
  {
    label: '删除',
    key: 'delete',
    danger: true,
  },
]

function handleClickItem(key: string) {
  switch (key) {
    case 'view-history':
      emits('handleViewHistory', props.project)
      break
    case 'edit':
      emits('handleEdit', props.project.id)
      break
    case 'view':
      emits('handleView', props.project.id)
      break
    case 'delete':
      handleClickDelete(props.project.id)
      break
  }
}

/**
 * 删除事件
 * @param id
 */
function handleClickDelete(id: string) {
  projectRequest.delete(id).then(() => {
    emits('handleRefresh')
  })
}
</script>

<template>
  <div flex="~ col" class="project-card">
    <div class="top">
      <img alt="项目封面" :src="ImageProjectCoverDefault">
      <div>
        {{ project.name }}
      </div>
    </div>
    <div class="description">
      {{ project.description }}
    </div>
    <div class="bottom">
      <div>
        <NTag v-if="isDisabled" type="warning" size="small" :bordered="false">
          已禁用
        </NTag>
        <NTag v-else type="info" size="small" :bordered="false">
          启用中
        </NTag>
      </div>
      <div>
        <n-dropdown trigger="click" :options="options" placement="bottom-start" size="small" @select="handleClickItem">
          <div i-ri-list-unordered />
        </n-dropdown>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "./project-card.less";
</style>
